<template>
  <div class="instructions-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>系统使用说明</span>
      </div>

      <div class="instructions-content">
        <h3>欢迎使用暂存柜管理系统！</h3>
        <p>本系统旨在为您提供便捷的物品暂存服务。</p>

        <h4>核心功能：</h4>
        <ul>
          <li><strong>用户认证：</strong>注册、登录、登出，保障您的账户安全。</li>
          <li><strong>暂存柜使用：</strong>查看空闲柜子，选择并使用，生成临时密码取件，使用完毕手动释放。</li>
          <li><strong>使用记录：</strong>查看您的历史使用记录，了解您的使用情况。</li>
          <li><strong>个人设置：</strong>修改您的账户密码。</li>
        </ul>

        <h4>使用流程：</h4>
        <ol>
          <li>注册并登录系统。</li>
          <li>在"暂存柜管理"页面查看柜子状态。</li>
          <li>选择一个空闲柜子，点击使用，获取取件密码。</li>
          <li>将物品放入柜子，并记住您的取件密码。</li>
          <li>需要取件时，回到仪表盘或暂存柜详情页，输入取件密码释放柜子。</li>
          <li>您可以在"使用记录"页面查看您的历史使用信息。</li>
          <li>如需修改密码，请前往"修改密码"页面。</li>
        </ol>

        <h4>注意事项：</h4>
        <ul>
          <li>请妥善保管您的取件密码。</li>
          <li>使用完毕请及时释放柜子，以免影响他人使用。</li>
          <li>如遇柜子故障或其他问题，请联系管理员。</li>
        </ul>

        <p>感谢您的使用！</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SystemInstructions',
};
</script>

<style scoped>
.instructions-container {
  padding: 20px;
}

.instructions-content {
  line-height: 1.6;
}

.instructions-content h3,
.instructions-content h4 {
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

.instructions-content ul,
.instructions-content ol {
  margin-bottom: 20px;
  padding-left: 20px;
}

.instructions-content li {
  margin-bottom: 5px;
}
</style> 